<template>
    <el-popover 
		popper-class="flex-popover"
		:visible="outerVisible"
		virtual-triggering
		:virtual-ref="currentRef"
		width="10vw"
	>
		
		<template #default>
			<div class="flex-popover-content" v-click-outside="onClickOutside">			
				<slot></slot>                  
				<el-popover
                    v-if="hasDel"
            		:visible="innerVisible"
            		placement="left"
            		trigger="click"	
            	>
            	    <template #reference>
            	        <div class="del-btn" @click="innerVisible = true"><i class="ri-delete-bin-line" style="margin-right:var(--sPadding);"></i><span>删除</span>
            	        </div>
            	    </template>
            	    <template #default>
						<div>
							<div style="margin:var(--sPadding) 0;">
            	      		    {{ delText }}
            	      		</div>
            	      		<div>
            	      		  <div class="flex-btn small opacity">取消</div>
            	      		  <div class="flex-btn small" @click="handleSubmit" >确认</div>
            	      		</div>
						</div>
						
            	    </template>
            	</el-popover>
			</div>
			
		</template>
	</el-popover>
</template>
<script setup>
    import { ref } from 'vue';
    import { ClickOutside as vClickOutside } from 'element-plus'
    const props = defineProps({
        currentRef:{ type:Object },
        hasDel:{ type:Boolean },
		delText:{ type:String, default:'确定要删除吗？' }
    })
	const emit = defineEmits(['onSubmit']);
    const outerVisible = ref(false);
    const innerVisible = ref(false);
	let targetId = null;
    const onClickOutside = ()=>{
		outerVisible.value = false;
		innerVisible.value = false;
	}
	function handleSubmit(){
		emit('onSubmit', targetId);
	}
    function handleOpen(id){
		targetId = id;
        outerVisible.value = true;
    }
    defineExpose({
        handleOpen
    })
</script>